<template>
  <view>
    <view class="card" v-for="(item,index) in 10" :key="index" @click="toDetail(item)">
      <view class="card__top">
        <view class="u-line-1">基础入门-数据库实战教程</view>
        <template v-if="hintTime">
          <view class="flex-shrink color-ac">
            04.03 10:00-11:00
          </view>
        </template>
        <template v-if="headRightText">
          <!-- color-in  进行中   color-primary 完成  -->
          <view class="headRight color-in">进行中</view>
        </template>
      </view>
      <view class="card__value">
        <view class="card__value__left">
          <view class="card__value__left--hint">一对一</view>
          <lr-image width="200rpx" height="160rpx" radius="8rpx"></lr-image>
        </view>
        <view class="card__value__right">
          <template v-if="!hintTime">
            <view class="card__value__right__item">
              <text class="card__value__right__item--label">课程人数：</text>
              <text class="card__value__right__item--value">1/1</text>
            </view>
            <view class="card__value__right__item">
              <text class="card__value__right__item--label">上课时间：</text>
              <text class="card__value__right__item--value">04.03 10:00-11:00</text>
            </view>
          </template>
          <template v-if="hintTime">
            <view class="card__value__right__item">
              <text class="card__value__right__item--label">授课教师：</text>
              <text class="card__value__right__item--value">张三</text>
            </view>
          </template>
          <view class="card__value__right__item">
            <text class="card__value__right__item--label">上课地点：</text>
            <text class="card__value__right__item--value">远大购物中心A座1-103</text>
          </view>
        </view>
      </view>
      <view class="card__bottom" v-if="!noBut">
        <template v-if="leftDefault">
          <view class="card__bottom--left">
            第4次 已上3次剩余17次
          </view>
          <view class="card__bottom--right" v-if="!noRightBut">
            <template v-if="!hintTime">
              <view class="teacher-red-but-60">
                <u-button>
                  <text>结束上课</text>
                </u-button>
              </view>
            </template>
            <template v-if="hintTime">
              <view class="teacher-primary-but-60">
                <u-button>
                  <text>确认上课</text>
                </u-button>
              </view>
            </template>
          </view>
        </template>
        <template v-if="leftRed">
          <view class="color-err">
            如有疑问，请联系客服！
          </view>
          <view class="card__bottom--right">
            <view class="teacher-primary-but-60">
              <u-button>
                <text>确认上课</text>
              </u-button>
            </view>
          </view>
        </template>
        <template v-if="headRightText">
          <view class="flex-end-but">
            <view class="flex-end-but-width-60 ">
              <u-button shape="circle">
                <text style="color:#181818">退款</text>
              </u-button>
            </view>
          </view>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "lr-course2",
  props: {
    //左下 默认展示的 教师端 --上课次数
    leftDefault: {
      type: Boolean,
      default: true,
    },
    //左下红色的字体
    leftRed: {
      type: Boolean,
      default: false,
    },
    //右上展示时间
    hintTime: {
      type: Boolean,
      default: false,
    },
    //右上展示文字
    headRightText: {
      type: Boolean,
      default: false,
    },
    //不展示右边按钮
    noRightBut: {
      type: Boolean,
      default: false,
    },
    //不展示下边按钮
    noBut: {
      type: Boolean,
      default: false,
    }
  },
  methods: {
    /**
     * 点击整个盒子 进详情
     */
    toDetail(item){
      this.$emit('toDetail', item)
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  background: #ffffff;
  padding: 20rpx;
  border-radius: 16rpx;
  box-sizing: border-box;

  & + .card {
    margin-top: 20rpx;
  }

  &__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20rpx;

    .headRight {
      flex-shrink: 0;
      margin-left: 20rpx;
    }
  }

  &__value {
    display: flex;

    &__left {
      position: relative;
      width: 200rpx;
      height: 160rpx;
      border-radius: 8rpx;
      overflow: hidden;
      flex-shrink: 0;

      &--hint {
        position: absolute;
        padding: 4rpx 10rpx;
        border-radius: 8rpx 0 16rpx 0;
        font-size: $u-tips-font;
        background: $u-error;
        color: #ffffff;
        z-index: 5;
      }
    }

    &__center {
      box-sizing: border-box;
      margin-left: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      &--title {
        font-size: $u-main-font;
        font-weight: 500;
        margin-bottom: 20rpx;
      }

      &--hint {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;

        .tips {
          padding: 4rpx 10rpx;
          font-size: $u-tips-font;
          border-radius: 4rpx;

          & + .tips {
            margin-left: 20rpx;
          }
        }
      }

      &--bottom {
        flex: 1;
        display: flex;
        align-items: flex-end;

        &--discount {
          color: $u-error;
          font-size: $u-title-big-font;
          font-weight: 500;
        }

        &--original {
          margin-left: 10rpx;
          font-size: $u-tips-font;
        }
      }
    }

    &__right {
      margin-left: 20rpx;
      display: flex;
      flex-direction: column;

      &__item {
        color: $u-tips-color;
        font-size: $u-unit-font;

        & + .card__value__right__item {
          margin-top: 20rpx;
        }

        &--label {
          margin-right: 20rpx;
          flex-shrink: 0;
          width: 120rpx;
        }

        &--value {
        }
      }
    }
  }

  &__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0;

    &--left {
      color: $u-content-color;
      font-size: $u-unit-font;
    }

    &--right {
      width: 214rpx;
      flex-shrink: 0;
      margin-left: 20rpx;
    }
  }
}
</style>
